<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title>确认订单-DeathGhost</title>
    <meta name="keywords" content="DeathGhost,DeathGhost.cn,web前端设,移动WebApp开发"/>
    <meta name="description" content="DeathGhost.cn::H5 WEB前端设计开发!"/>
    <meta name="author" content="DeathGhost"/>
    <link href="/style/style.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="/js/public.js"></script>
    <script type="text/javascript" src="/js/jquery.js"></script>
    <script type="text/javascript" src="/js/jqpublic.js"></script>
    <script src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script src="/js/layer/layer.js"></script>
</head>
<body>
<header class="header">
</header>
<script>

    $('.header').load('/header.html', function (responseTxt, statusTxt, xhr) {


    })

</script>
<div id="app">

    <section class="Psection MT20" id="Cflow">

        <form action="/order/add" method="post">
            <div class="confirm_addr_f">
                <span class="flow_title">收货地址：</span>
                <!--已保存的地址列表-->
                <ul class="address">
                    <li id="style1" v-for="(addr,index) in address">
                        <input type="hidden" :value="addr.id">
                        <!--<input type="radio" checked="checked"  name="rdColor" :value="addr.id"  v-model="addr.status1"/>-->
<!--                        <span v-if="addr.status=='y'" ><input type="radio" checked="checked"  name="rdColor" :value="addr.id" /></span>-->
<!--                        <span v-if="addr.status=='n'" ><input type="radio"  name="rdColor" :value="addr.id"/></span>-->
                        <input type="radio"  name="rdColor" :value="addr.id" :checked="addr.status=='y'" @click="sel(addr)"/>
                        <label>&nbsp;&nbsp;<span>{{addr.province}}    </span><span> {{addr.city}}    </span><span>{{addr.district}}</span>
                            <span>{{addr.person}} </span> <span class="fontcolor">{{addr.phone}}</span></label></li>
                </ul>

            </div>
            <div class="pay_delivery">
                <span class="flow_title">在线支付方式：</span>
                <ul>
                    <li><input type="radio" name="pay" id="alipay" value="1"/><label for="alipay"><i class="alipay"></i></label>
                    </li>
                </ul>
            </div>
            <div class="inforlist">
                <span class="flow_title">商品清单</span>
                <table>
                    <th>名称</th>
                    <th>数量</th>
                    <th>价格</th>
                    <th>小计</th>
                    <tr v-for="(cart,index) in dishs">
<!--                    <input type="text" name="cartids"/>-->
                       <!-- <td>{{cart.dish.id}}</td>-->
                        <td>{{cart.dish.dishName}}</td>
                        <td>{{cart.nums}} </td>
                        <td>{{cart.dish.price}}</td>
                        <td>{{cart.nums*cart.money}}</td>
                    </tr>
                </table>
                <div class="Order_M"><p><em>订单附言:</em><input name="msg" v-model="msg"></p></div>
                <div class="Sum_infor"><p class="p2">合计：￥<span>{{zprice}}</span></p><input type="button" value="提交订单" class="p3button" @click="sub()"></div>
            </div>
        </form>
    </section>
</div>


<footer>
    <section class="Otherlink">
        <aside>
            <div class="ewm-left">
                <p>手机扫描二维码：</p>
                <img src="/images/Android_ico_d.gif">
                <img src="/images/iphone_ico_d.gif">
            </div>
            <div class="tips">
                <p>客服热线</p>
                <p><i>1830927**73</i></p>
                <p>配送时间</p>
                <p>
                    <time>09：00</time>
                    ~
                    <time>22:00</time>
                </p>
                <p>网站公告</p>
            </div>
        </aside>
        <section>
            <div>
                <span><i class="i1"></i>配送支付</span>
                <ul>
                    <li><a th:href="article_read.html" target="_blank" title="标题">支付方式</a></li>
                    <li><a th:href="article_read.html" target="_blank" title="标题">配送方式</a></li>
                    <li><a th:href="article_read.html" target="_blank" title="标题">配送效率</a></li>
                    <li><a th:href="article_read.html" target="_blank" title="标题">服务费用</a></li>
                </ul>
            </div>
            <div>
                <span><i class="i2"></i>关于我们</span>
                <ul>
                    <li><a th:href="article_read.html" target="_blank" title="标题">招贤纳士</a></li>
                    <li><a th:href="article_read.html" target="_blank" title="标题">网站介绍</a></li>
                    <li><a th:href="article_read.html" target="_blank" title="标题">配送效率</a></li>
                    <li><a th:href="article_read.html" target="_blank" title="标题">商家加盟</a></li>
                </ul>
            </div>
            <div>
                <span><i class="i3"></i>帮助中心</span>
                <ul>
                    <li><a th:href="article_read.html" target="_blank" title="标题">服务内容</a></li>
                    <li><a th:href="article_read.html" target="_blank" title="标题">服务介绍</a></li>
                    <li><a th:href="article_read.html" target="_blank" title="标题">常见问题</a></li>
                    <li><a th:href="article_read.html" target="_blank" title="标题">网站地图</a></li>
                </ul>
            </div>
        </section>
    </section>
    <div class="copyright">© 版权所有 2016 DeathGhost 技术支持：<a href="http://www.deathghost.cn"
                                                          title="DeathGhost">DeathGhost</a></div>
</footer>
<script>
    new Vue({
        el:"#app",
        data:{
            //地址   所选商品信息
            arrlist:[],
            address:[],
            //选中的地址
            seladdress:{},
            dishs:[],
            msg:"",
        },
        computed:{
            zprice:function(){
                let list=this.dishs;
                let zprice=0;
                for(let money of list){
                    zprice=zprice+Number(money.nums)*Number(money.money);
                }
                return zprice;
            }
        },
        methods:{
            //地址选中后其他的值都与选中的相反
            sel(a){
                this.seladdress=a;
                console.log(a);
            },
            //提交
            sub(){
                //提交商品信息   留言信息   地址信息   付款方式信息
                console.log(this.msg);
                let order={}
                axios.post("/order_vue/add",{
                    address:this.seladdress,
                    msg:this.msg,
                    pay:"1",
                    carts:this.dishs
                }).then(r=>{
                        if(r.data.code===200){
                            location.href="/order_vue/verify?number="+r.data.data;
                        }
                });
            }
        },
        mounted:function(){
            //取出存在本地的数据
            let carts = JSON.parse(localStorage.getItem("carts"))
            axios.post("/cart_vue/order/list",carts).then(r=>{
                if(r.data.code===200){
                    this.arrlist=r.data.data;
                    this.dishs=r.data.data[1];
                    this.address=r.data.data[0];
                    console.log( this.dishs)
                    for(let add of r.data.data[0]){
                        if(add.status==='y'){
                            this.seladdress=add;
                        }
                    }
                console.log(this.seladdress);
                }
            })
        }
    })
</script>
</body>
</html>
